<!-- 
 //根据系统不同的时间来判断，所以用到日期内置对象。
    根据不同的时间，页面显示不同的图片，同时显示不同的问候语。
    1.如果是上午时间打开页面，显示上午好，显示的是上午照片。
    2.如果是下午时间打开页面，显示下午好，显示的是下午照片。
    3.如果是晚上时间打开页面，显示晚上好，显示的是晚上照片。

思路：
    利用多分支语句来设置不同的照片
    需要一个图片，并且根据时间修改图片，就需要操作元素src属性，这个要放到if条件语句里面
    需要一个div元素，显示不同的问候语，修改元素的内容即可

 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/胡歌.jpg" alt="">
    <div>大家上午好</div>
    <script>
        //获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //获取当前的小时数
        var date = new Date();
        var h = date.getHours();
        //判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/胡歌.jpg';
            div.innerHTML = '大家上午好';
        } else if (h < 18) {
            img.src = 'images/霍建华.jpg';
            div.innerHTML = '大家下午好';
        } else {
            img.src = 'images/霍建华1.jpg'
            div.innerHTML = '<strong>大家晚上好</strong>';  //这里认识标签
            // div.innerText = '<strong>大家晚上好</strong>';   //不识别标签，不认识标签
        }
    </script>
</body>

</html>